<template>
  <div class="Square">
    <navbar title="广场" :show-back="false"></navbar>
    <page :top="133">
      <van-tabs v-model="active" class="fa" @change="childrenChange">
        <van-tab v-for="(item, index) in hall" :title="item.title" :key="index">
          <van-tabs :swipeable="true" v-model="item.index" @change="childrenChange" class="chil">
            <van-tab class="father" v-for="(v, i) in item.children" :title="v.title" :key="i" >
             
                <van-list v-model="v.loading" :immediate-check="false" :finished="v.finished" @load="getTabList" >
                  <template #finished>
                    <div class="Squaredata">
                      <img class="Squaredata_img" src="../../static/images/img/noLogin.png">
                      <div class="Squaredata_p">没有数据了</div>
                    </div>
                  </template>


                  <van-row class="child">
                    <van-col v-for="vi, ind in v.content" :key="ind" span="12">
                      <img :src="vi.thing_img" alt="">
                    </van-col>
                  </van-row>
                </van-list>
              
            </van-tab>
          </van-tabs>
        </van-tab>
      </van-tabs>
    </page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      hall: [
        {
          type: 1,
          title: "失物招领",
          index: 0,
          children: [
            {
              title: "全部",
              type: -1,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 3,
              content: [],
            },
            {
              title: "证件",
              type: 1,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 3,
              content: [],
            },
            {
              title: "服装",
              type: 2,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 1,
              content: [],
            },
            {
              title: "数码",
              type: 3,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 2,
              content: [],
            },
            {
              title: "日用品",
              type: 4,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 1,
              content: [],
            },
            {
              title: "其他",
              type: 5,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 1,
              content: [],
            },
          ],
        },
        {
          type: 2,
          title: "寻物启事",
          index: 0,
          children: [
            {
              title: "全部",
              type: -1,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 4,
              content: [],
            },
            {
              title: "证件",
              type: 1,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 3,
              content: [],
            },
            {
              title: "服装",
              type: 2,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 3,
              content: [],
            },
            {
              title: "数码",
              type: 3,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 5,
              content: [],
            },
            {
              title: "日用品",
              type: 4,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 1,
              content: [],
            },
            {
              title: "其他",
              type: 5,
              page: 1,
              loading: false,
              finished: false,
              totalpage: 3,
              content: [],
            },
          ],
        },
      ],
    };
  },
  async created() {
    this.getTabList("click");
  },
  methods: {
    async getTabList(type) {
      let childrenObj =
        this.hall[this.active].children[this.hall[this.active].index];
      let a = async () => {
        let res = await this.$http.home.tab({
          thing_type: this.hall[this.active].type,
          thing_category: childrenObj.type,
          page: childrenObj.page,
        });
        console.log(res);

        childrenObj.content = [...childrenObj.content, ...res];//拼接

        childrenObj.page += 1;

        if (childrenObj.page > childrenObj.totalpage) {
          childrenObj.finished = true
        } else {
          childrenObj.loading = false
        }
      };

      type == "click" ? childrenObj.content.length == 0 ? a() : null : a()

    },
    async childrenChange() {
      this.getTabList("click");
    },
  },
};
</script>

<style scoped lang='less'>
@import "../assets/less/page/Square.less";
</style>
